<template>
    <div style="margin: 10px 0;">
        <el-select v-model="searchStatus" placeholder="请选择审核情况">
            <el-option label="所有" value="" @click="checkMeeting()"></el-option>
            <el-option label="审核中" value="审核中" @click="checkMeeting()"></el-option>
            <el-option label="审核通过" value="审核通过" @click="checkMeeting()"></el-option>
            <el-option label="审核失效" value="审核失效" @click="checkMeeting()"></el-option>
            <el-option label="未提交" value="未提交" @click="checkMeeting()"></el-option>
        </el-select>
        <el-input v-model="searchMeeting" placeholder="按会议名称搜索" style=" width: 20%;" clearable></el-input>
        <el-button style="margin-left:5px ;" @click="checkMeeting()">
            <el-icon>
                <search />
            </el-icon><span style="margin-left: 5px;">查询</span>
        </el-button>
        <el-button type="primary" style="margin-left:30px ;" @click="checkAdd()">
            <el-icon>
                <document-add />
            </el-icon><span style="margin-left: 5px;">添加</span>
        </el-button>
        <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px;">
            <el-table-column prop="id" label="ID" sortable />
            <el-table-column prop="meetingName" label="会议名称" />
            <el-table-column prop="attendee" label="参会人" />
            <el-table-column prop="meetingType" label="会议类型" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag vclass="ml-2" type="info" v-if="scope.row.status == '未提交'">{{scope.row.status}}
                    </el-tag>
                    <el-select v-model="scope.row.status" style="width: 50%;" v-else>
                        <el-option label="审核通过" value="审核通过" @click="dealStatus(scope.row)"></el-option>
                        <el-option label="审核失效" value="审核失效" @click="dealStatus(scope.row)"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="checkUp(scope.row)">信息详情</el-button>
                    <el-button type="text" @click="dealFile(scope.row)">附件详情</el-button>
                    <el-popconfirm title="确定退回修改吗？" v-if="scope.row.status == '审核中'" @confirm="dealStatus(scope.row)">
                        <template #reference>
                            <el-button type="text">退回修改</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm title="这些内容确定删除吗？" @confirm="deleteMeeting(scope.row)">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="demo-pagination-block">
            <div style="float: right;">
                <el-pagination :currentPage="current" :page-sizes="[10,20,30]" :page-size=page
                    layout="sizes, prev, pager, next, total, jumper" :total=firstTotal @size-change="handleSize"
                    @current-change="handleCurrent">
                </el-pagination>
            </div>
        </div>

        <el-dialog v-model="dialogAdd" title="录入参加会议" width="50%" center>
            <el-form ref="meeting" :model="meeting" :rules="rules" label-width="200px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="参与人">
                    <el-button size="small" type="primary" @click="addAccount()">选择本单位人员</el-button>
                    <span style="margin-left: 10px;">{{meeting.attendee}}</span>
                </el-form-item>

                <el-form-item label="会议名称" prop="meetingName">
                    <el-input v-model="meeting.meetingName" placeholder="请输入会议名称"></el-input>
                </el-form-item>
                <el-form-item label="会议类型" prop="meetingType">
                    <el-select v-model="meeting.meetingType" placeholder="请选择会议类型">
                        <el-option label="国际学术会议" value="国际学术会议"></el-option>
                        <el-option label="国内学术会议" value="国内学术会议"></el-option>
                        <el-option label="区内学术会议" value="区内学术会议"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办单位">
                    <el-input v-model="meeting.organizer" placeholder="请输入主办单位"></el-input>
                </el-form-item>
                <el-form-item label="参会时间" required>
                    <el-col :span="11">
                        <el-form-item prop="meetingDate">
                            <el-date-picker v-model="meeting.meetingDate" type="date" placeholder="选择日期"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="参会地址">
                    <el-input v-model="meeting.meetingAddress" placeholder="请输入参会地址"></el-input>
                </el-form-item>

                <el-form-item label="学科门类" prop="disciplineCategory">
                    <el-select v-model="meeting.disciplineCategory" placeholder="请选择学科门类">
                        <el-option label="科技类" value="科技类"></el-option>
                        <el-option label="社科类" value="社科类"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="提交论文篇数">
                    <el-input-number :min="0" controls-position="right" style="width: 100px;"
                        v-model.number="meeting.papersSubmitted" type="number"></el-input-number>
                </el-form-item>

                <el-form-item label="论文题目">
                    <el-input v-model="meeting.thesisTitle" :rows="4" type="textarea" placeholder="请输入论文题目" />
                </el-form-item>

                <el-form-item label="特邀报告篇数">
                    <el-input-number :min="0" controls-position="right" style="width: 100px;"
                        v-model.number="meeting.invitedReports" type="number"></el-input-number>
                </el-form-item>

                <el-form-item label="报告题目">
                    <el-input v-model="meeting.reportTitle" :rows="4" type="textarea" placeholder="请输入报告题目" />
                </el-form-item>

                <el-form-item label="会议简介">
                    <el-input v-model="meeting.conferenceIntroduction" :rows="4" type="textarea"
                        placeholder="请输入会议简介" />
                </el-form-item>

                <el-form-item label="支撑材料">
                    <el-upload ref="upload" class="upload-demo" drag action="#" :http-request="uploadFile">
                        <el-icon class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div class="el-upload__text">
                            拖放文件 <em>上传文件</em>
                        </div>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button size="large" type="primary" @click="submitAddMeeting('meeting')">保存参加会议信息 </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogDealMessage" title="参加会议详情" width="50%" center>
            <el-form ref="meeting" :model="meeting" :rules="rules" label-width="200px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="参与人">
                    <el-input v-model="meeting.attendee" v-if="false"></el-input>
                    <span>{{meeting.attendee}}</span>
                </el-form-item>

                <el-form-item label="会议名称" prop="meetingName">
                    <el-input v-model="meeting.meetingName" placeholder="请输入会议名称"></el-input>
                </el-form-item>
                <el-form-item label="会议类型" prop="meetingType">
                    <el-select v-model="meeting.meetingType" placeholder="请选择会议类型">
                        <el-option label="国际学术会议" value="国际学术会议"></el-option>
                        <el-option label="国内学术会议" value="国内学术会议"></el-option>
                        <el-option label="区内学术会议" value="区内学术会议"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办单位">
                    <el-input v-model="meeting.organizer" placeholder="请输入主办单位"></el-input>
                </el-form-item>
                <el-form-item label="参会时间" required>
                    <el-col :span="11">
                        <el-form-item prop="meetingDate">
                            <el-date-picker v-model="meeting.meetingDate" type="date" placeholder="选择日期"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="参会地址">
                    <el-input v-model="meeting.meetingAddress" placeholder="请输入参会地址"></el-input>
                </el-form-item>

                <el-form-item label="学科门类" prop="disciplineCategory">
                    <el-select v-model="meeting.disciplineCategory" placeholder="请选择学科门类">
                        <el-option label="科技类" value="科技类"></el-option>
                        <el-option label="社科类" value="社科类"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="提交论文篇数">
                    <el-input-number :min="0" controls-position="right" style="width: 100px;"
                        v-model.number="meeting.papersSubmitted" type="number"></el-input-number>
                </el-form-item>

                <el-form-item label="论文题目">
                    <el-input v-model="meeting.thesisTitle" :rows="4" type="textarea" placeholder="请输入论文题目" />
                </el-form-item>

                <el-form-item label="特邀报告篇数">
                    <el-input-number :min="0" controls-position="right" style="width: 100px;"
                        v-model.number="meeting.invitedReports" type="number"></el-input-number>
                </el-form-item>

                <el-form-item label="报告题目">
                    <el-input v-model="meeting.reportTitle" :rows="4" type="textarea" placeholder="请输入报告题目" />
                </el-form-item>

                <el-form-item label="会议简介">
                    <el-input v-model="meeting.conferenceIntroduction" :rows="4" type="textarea"
                        placeholder="请输入会议简介" />
                </el-form-item>

                <el-form-item>
                    <el-button size="large" v-if="cheackOrDeal" type="primary" @click="submitUpMeeting('meeting')">修改参加会议信息 </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogDealFile" title="附件详情" width="30%" center>
            <div style="text-align: center;">
                <el-button type="success" @click="getFile">下载附件</el-button>
                <el-divider style="border-width: 3px;"></el-divider>

                <el-upload ref="updataFile" class="upload-demo" :limit="1" drag action="#" :http-request="UpFile" v-if="cheackOrDeal">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">
                        拖放文件 <em>修改文件</em>
                    </div>
                </el-upload>
            </div>
        </el-dialog>

        <el-dialog v-model="dialogAddAccount" title="录入学术论文信息" width="50%" center>
            <el-select v-model="searchRoles" style=" width: 20%;" placeholder="请选择角色类别">
                <el-option label="所有" value="" @click="checkRoles()"></el-option>
                <el-option label="管理员" value="管理员" @click="checkRoles()"></el-option>
                <el-option label="老师" value="老师" @click="checkRoles()"></el-option>
                <el-option label="研究生" value="研究生" @click="checkRoles()"></el-option>
            </el-select>
            <el-input v-model="searchName" placeholder="按名搜索" style=" width: 20%;" clearable></el-input>
            <el-button style="margin-left:5px ;" @click="checkRoles()">
                <el-icon>
                    <search />
                </el-icon><span style="margin-left: 5px;">查询</span>
            </el-button>
            <el-button style="margin-left:5px ;" type="primary" @click="addAccountNameAndID()">
                <span>添加</span>
            </el-button>
            <span style="margin-left: 5px;">（点击一行，然后选择添加）</span>
            <div style="margin-top: 10px;">
                <el-table ref="multipleTableRef" highlight-current-row :data="AccountTableData"
                    @current-change="handleSelectionChange" stripe style="width: 100%">
                    <el-table-column prop="participantName" label="姓名" />
                    <el-table-column prop="workPlace" label="工作单位" />
                    <el-table-column prop="category" label="类别" />
                </el-table>
            </div>
            <div class="demo-pagination-block">
                <div style="float: right;">
                    <el-pagination :currentPage="currentPage" :page-size=pageSize
                        layout="prev, pager, next,total,jumper" :total=total @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

            <!-- 多留空间好看 -->
            <div style="margin-top: 10px;"></div>
        </el-dialog>


    </div>
</template>


<script>
    import {
        ref,
        reactive,
        computed,
        watch
    } from 'vue';
    import {
        UploadFilled,
        InfoFilled
    } from '@element-plus/icons-vue'
    import request from '@/utils/request.js'
    import {
        ElMessage
    } from 'element-plus'
    export default {
        name: '',

        data() {
            return {
                currentPage: 1, // 用户当前页
                total: '', // 总页数
                pageSize: 10, // 每页要展示数据条数
                AccountTableData: [], // 接收后台的总数据
                accountCache: '',
                dialogAddAccount: false,
                searchName: '',
                searchRoles: '',

                searchStatus: '',
                searchMeeting: '',
                tableData: [],
                dialogAdd: false,
                dialogDealFile: false,
                dialogDealMessage: false,
                current: 1,
                page: 10,
                firstTotal: 0,
                loadAddress: '',
                cheackOrDeal: false,
                meeting: {
                    id: '',
                    attendee: '',
                    meetingName: '',
                    meetingType: '',
                    organizer: '',
                    meetingDate: '',
                    meetingAddress: '',
                    disciplineCategory: '',
                    papersSubmitted: 0,
                    thesisTitle: '',
                    invitedReports: 0,
                    reportTitle: '',
                    conferenceIntroduction: '',
                    supportingMaterial: '',
                    status: '',
                    userId: '',
                },
                rules: {
                    meetingName: {
                        required: true,
                        message: '请输入会议名称',
                        trigger: 'blur',
                    },
                    meetingDate: [{
                        type: 'date',
                        required: true,
                        message: '请选择参会时间',
                        trigger: 'change',
                    }, ],
                    meetingType: {
                        required: true,
                        message: '请选择会议类型',
                        trigger: 'change',
                    },
                    disciplineCategory: {
                        required: true,
                        message: '请选择学科门类',
                        trigger: 'change',
                    },
                }

            }
        },
        methods: {
            load() {
                request({
                    url: '/meeting/admin',
                    headers: {
                        isToken: true
                    },
                    method: 'get',
                    timeout: 20000,
                    params: {
                        current: this.current,
                        page: this.page,
                        searchMeeting: this.searchMeeting,
                        searchStatus: this.searchStatus
                    }
                }).then((res) => {
                    this.tableData = res.data.tableData;
                    this.firstTotal = res.data.total;
                    this.loadAddress = res.data.loadAddress;
                });
            },
            checkMeeting() {
                this.current = 1;
                this.load();
            },
            checkAdd() {
                this.meeting.id = '';
                this.meeting.attendee = '';
                this.meeting.meetingName = '';
                this.meeting.meetingType = '';
                this.meeting.organizer = '';
                this.meeting.meetingDate = '';
                this.meeting.meetingAddress = '';
                this.meeting.disciplineCategory = '';
                this.meeting.papersSubmitted = 0;
                this.meeting.thesisTitle = '';
                this.meeting.invitedReports = 0;
                this.meeting.reportTitle = '';
                this.meeting.conferenceIntroduction = '';
                this.meeting.supportingMaterial = '';
                this.meeting.status = '';
                this.meeting.userId = '';
                this.dialogAdd = true;
            },
            checkUp(row) {
                this.meeting.id = row.id;
                this.meeting.attendee = row.attendee;
                this.meeting.meetingName = row.meetingName;
                this.meeting.meetingType = row.meetingType;
                this.meeting.organizer = row.organizer;
                this.meeting.meetingDate = row.meetingDate;
                this.meeting.meetingAddress = row.meetingAddress;
                this.meeting.disciplineCategory = row.disciplineCategory;
                this.meeting.papersSubmitted = row.papersSubmitted;
                this.meeting.thesisTitle = row.thesisTitle;
                this.meeting.invitedReports = row.invitedReports;
                this.meeting.reportTitle = row.reportTitle;
                this.meeting.conferenceIntroduction = row.conferenceIntroduction;
                this.meeting.supportingMaterial = row.supportingMaterial;
                this.meeting.status = row.status;
                this.meeting.userId = row.userId;
                if (row.status != '审核通过' ) this.cheackOrDeal = true;
                else this.cheackOrDeal = false;
                this.dialogDealMessage = true;
            },
            submitUpMeeting(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            url: '/meeting',
                            headers: {
                                isToken: false
                            },
                            method: 'put',
                            timeout: 20000,
                            data: this.meeting
                        }).then(() => {
                            this.dialogDealMessage = false;
                            this.load();
                            ElMessage({
                                showClose: true,
                                message: '修改成功',
                                center: true,
                                type: 'success'
                            })
                        });
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                });
            },
            dealFile(row) {
                this.meeting.supportingMaterial = row.supportingMaterial;
                this.meeting.id = row.id;
                if (row.status != '审核通过' ) this.cheackOrDeal = true;
                else this.cheackOrDeal = false;
                this.dialogDealFile = true;
            },
            uploadFile(params) {
                const formData = new FormData();
                formData.append("file", params.file);
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        isToken: false
                    }
                };
                request.post('/meeting/fileCache', formData, config).then((res) => {
                    this.meeting.supportingMaterial = res.data.saveName;
                    ElMessage({
                        showClose: true,
                        message: '上传成功',
                        center: true,
                        type: 'success'
                    })
                });
            },
            submitAddMeeting(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            url: '/meeting',
                            headers: {
                                isToken: false
                            },
                            method: 'post',
                            timeout: 20000,
                            data: this.meeting
                        }).then(() => {
                            this.$refs['upload'].clearFiles('ready')
                            this.dialogAdd = false;
                            this.load()
                            ElMessage({
                                showClose: true,
                                message: '添加成功',
                                center: true,
                                type: 'success'
                            })
                        });
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            handleCurrent(currentPage) {
                this.current = currentPage;
                this.load();
            },
            handleSize(pageSize) {
                this.page = pageSize;
                this.current = 1;
                this.load();
            },
            getFile() {
                request({
                    url: this.loadAddress + "/" + this.meeting.supportingMaterial,
                    headers: {
                        isToken: false
                    },
                    method: 'get',
                    timeout: 20000,
                    responseType: 'blob',
                }).then((res) => {
                    ElMessage({
                        showClose: true,
                        message: '请稍等正在下载附件',
                        center: true,
                        type: 'success'
                    })
                    let blob = new Blob([res.data])
                    let fileName = this.meeting.supportingMaterial
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName)
                    } else {
                        // console.log(3)
                        var link = document.createElement('a')
                        link.href = window.URL.createObjectURL(blob)
                        link.download = fileName
                        link.click()
                        //释放内存
                        window.URL.revokeObjectURL(link.href)
                    }
                }).catch(() => {
                    ElMessage({
                        showClose: true,
                        message: '没有附件',
                        center: true,
                        type: 'error'
                    })
                });
            },
            UpFile(params) {
                const formData = new FormData();
                formData.append("file", params.file);
                if(this.meeting.supportingMaterial!=null) formData.append("fileName", this.meeting.supportingMaterial);
                formData.append("id", this.meeting.id);
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        isToken: false
                    }
                };
                request.post('/meeting/upFile', formData, config).then((res) => {
                    this.$refs['updataFile'].clearFiles('ready');
                    this.load();
                    ElMessage({
                        showClose: true,
                        message: '上传成功',
                        center: true,
                        type: 'success'
                    })
                    this.dialogDealFile = false;
                });
            },
            deleteMeeting(row) {
                this.meeting.id = row.id;
                this.meeting.attendee = row.attendee;
                this.meeting.meetingName = row.meetingName;
                this.meeting.meetingType = row.meetingType;
                this.meeting.organizer = row.organizer;
                this.meeting.meetingDate = row.meetingDate;
                this.meeting.meetingAddress = row.meetingAddress;
                this.meeting.disciplineCategory = row.disciplineCategory;
                this.meeting.papersSubmitted = row.papersSubmitted;
                this.meeting.thesisTitle = row.thesisTitle;
                this.meeting.invitedReports = row.invitedReports;
                this.meeting.reportTitle = row.reportTitle;
                this.meeting.conferenceIntroduction = row.conferenceIntroduction;
                this.meeting.supportingMaterial = row.supportingMaterial;
                this.meeting.status = row.status;
                this.meeting.userId = row.userId;
                request({
                    url: '/meeting',
                    headers: {
                        isToken: false
                    },
                    method: 'delete',
                    timeout: 20000,
                    data: this.meeting
                }).then(() => {
                    this.load()
                    ElMessage({
                        showClose: true,
                        message: '删除成功',
                        center: true,
                        type: 'success'
                    })
                })
            },
            dealStatus(row) {
                request({
                    url: '/meeting/status',
                    headers: {
                        isToken: false
                    },
                    method: 'put',
                    timeout: 20000,
                    data: {
                        id: row.id,
                        status: row.status == '审核中' ? '未提交' : row.status
                    }
                }).then(() => {
                    if (row.status == '审核中') row.status = '未提交'
                    ElMessage({
                        showClose: true,
                        message: '修改成功',
                        center: true,
                        type: 'success'
                    })
                });
            },
            addAccount() {
                this.currentPage = 1;
                this.pageSize = 10;
                this.total = '';
                this.accountLoad();
                this.dialogAddAccount = true;
            },
            accountLoad() {
                request({
                    url: '/accounts/getAllSimpleAccount',
                    headers: {
                        isToken: false
                    },
                    timeout: 20000,
                    method: 'get',
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchName: this.searchName,
                        searchRoles: this.searchRoles
                    }
                }).then((res) => {
                    this.total = res.data.total;
                    this.AccountTableData = res.data.account;
                })
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.accountLoad();
            },
            checkRoles() {
                this.currentPage = 1;
                this.accountLoad();
            },
            handleSelectionChange(selection) {
                this.accountCache = selection
                // console.log(this.accountCache)
            },
            textRowClick(row) {
                this.$refs.multipleTableRef.setCurrentRow(row);
            },
            addAccountNameAndID() {
                this.meeting.attendee = this.accountCache.participantName;
                this.meeting.userId = this.accountCache.usersId;
                ElMessage({
                    showClose: true,
                    message: this.accountCache.participantName + '添加成功',
                    center: true,
                    type: 'success'
                })
                this.dialogAddAccount = false;
            },
        },
        created() {
            this.load()
        },
        watch: {
            dialogAdd(val) {
                if (!val) {
                    this.$refs['upload'].clearFiles('ready')
                }
            }
        },
        setup() {
            return {
                UploadFilled,
                InfoFilled
            }
        }
    }
</script>

<style scoped>

</style>
